<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport"
        content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>${pageTitle}</title>
  <link rel="stylesheet" href="${cssUrl}"/>
  <link rel="shortcut icon" href="${faviconUrl}"/>
  <script src="${scriptUrl}"></script>
</head>

<body>
<div id="root">
  <img src="${logoUrl}" alt="Logo">
  <div class="loading"> Loading
    <span class="title">GraphQL Playground</span>
  </div>
</div>

<script>
  let csrf = ${_csrf};
  let properties = ${properties};
  if (!properties.headers) {
    properties.headers = {};
  }
  if (csrf) {
    properties.headers[csrf.headerName] = csrf.token;
  }
  if (properties.tabs) {
    properties.tabs.forEach(
        tab => tab.headers = Object.assign({}, properties.headers || {}, tab.headers || {}));
  }
  properties.setTitle = false;
  window.addEventListener('load', function (event) {
    GraphQLPlayground.init(document.getElementById('root'), properties)
  });
</script>
</body>

</html>
